<template>
	<view>
		<tt-bar leftIcon="icon-back" title="订单详情"></tt-bar>
		<view class="orderStatusBox">
			<text class="iconfont icon-info1"></text>
			<view class="orderTextBox">
				<view>
					<block v-if="orderDt.status==4 && orderDt.tri==1 && orderDt.tryTime==null">
						<text class="statusText">待体验 </text>
					</block>
					<block v-if="orderDt.status==2 && orderDt.tri==1 && orderDt.tryTime==null">
						<text class="statusText">待体验</text>
					</block>
					<text class="statusText">{{statusArr[orderDt.status]}}</text>
				</view>
				
				<text v-if="orderDt.status==1||orderDt.status==3">{{getDjs(orderDt.left_paytime)}}</text>
			</view>
		</view>
		<view class="remarkBox" @tap="addRemark">
			<text class="remarkTitle">卖家备注：</text>
			<text class="remarkCnt">{{orderDt.memo?orderDt.memo:'点击添加备注'}}</text>
			<text class="iconfont icon-right"></text>
		</view>
		<view class="buyerBox">
			<text class="buyerTitle">买家信息</text>
			<view class="buyerInfo">
				<text class="buyerName">{{orderDt.nickname}}</text>
				<text class="buyerTel">{{orderDt.phone}}</text>
				<text class="iconfont icon-liaotian" :data-imid="orderDt.imid" @tap="toMsg"></text>
				<text class="iconfont icon-dianhua" :data-tel="orderDt.member.phone" @tap="call"></text>
			</view>
		</view>

		<view class="orderInfoBox">
			<text class="orderTitle">订单信息</text>
			<view class="goodBox">
				<image :src="orderDt.img?orderDt.img:'../../static/good.png'" class="goodImg"></image>
				<view class="goodInfo">
					<text class="goodTitle">{{orderDt.name}}</text>
					<text class="goodPrice">￥{{orderDt.total}}</text>
				</view>
			</view>
			<view class="studentBox">
				<text class="studentTt">学员信息：</text>
				<text class="iconfont icon-renyuan"></text>
				<text class="studentName">{{orderDt.member.name}}</text>
				<image src="../../static/tel.png"></image>
				<text class="studentTel" >{{orderDt.member.phone}}</text>
			</view>
			<view class="studentBox">
				<text class="studentTt">{{txtArr[orderDt.status]}}：</text>
				<block v-if="orderDt.status==1 ||orderDt.status==2 || orderDt.status==3">
					<text class="paymentCount" >￥{{orderDt.payAmount}}</text>
				</block>
				<block v-if="orderDt.status==4">
					<text class="paymentCount" >￥{{(orderDt.price - orderDt.discount).toFixed(2)}}</text>
				</block>
				<block v-if="orderDt.status==8">
					<text class="paymentCount" >￥{{orderDt.payAll==1?(orderDt.price - orderDt.discount).toFixed(2):orderDt.prepay}}</text>
				</block>
			</view>
			<view class="orderInfo">
				<text>课程价格：</text>
				<text>￥{{orderDt.total}}</text>
			</view>
			<view class="orderInfo">
				<text>订单总价：</text>
				<text>￥{{orderDt.total- orderDt.discount}}</text>
			</view>
			<block v-if="orderDt.coupons.length>0" v-for="(item,index) in orderDt.coupons">
			<view class="orderInfo">
				<text>{{typeArr[item.coupon.source]}}：</text>
				<text>￥{{item.coupon.discount}}</text>
				<block v-if="item.coupon.source==1">
					<text class="iconfont icon-question" @tap="showNiuQuan"></text>
				</block>
			</view>
			</block>
			<view class="orderInfo">
				<text>订单编号：</text>
				<text>{{orderDt.orderNo}}</text>
			</view>
			<view class="orderInfo">
				<text>创建时间：</text>
				<text>{{orderDt.createTime}}</text>
			</view>
		</view>
		<view class="orderDtBtnGroup">
			<!-- <button>交易快照</button> -->
			<block v-if="!orderDt.groupId">
				<button class=" editPrice" :data-imid="orderDt.imid"   v-if="(orderDt.status==1||orderDt.status==3) && orderDt.discount<=0" @tap="editPrice">修改价格</button>
			</block>
			
			<button class="active" :data-imid="orderDt.imid"   v-if="orderDt.status==1||orderDt.status==3" @tap="reminder">催单</button>
			<button class="active" v-if="orderDt.status==4 && orderDt.tri==1 && orderDt.tryTime==null" :data-imid="orderDt.imid" @tap="toMsg">提醒体验</button>
			<!-- <button class="active" v-if="orderDt.status==4||orderDt.status==5" :data-imid="orderDt.imid" @tap="toMsg">开课提醒</button> -->
		</view>
		<poup ref="remarkPoup" :isCntSlot="true">
			<template v-slot:cntSlot>
				<input class="remarkInput" type="text" placeholder="请输入备注信息" v-model="remarkText" />
			</template>
		</poup>
		<poup ref="pricePoup" :isCntSlot="true">
			<template v-slot:cntSlot>
				<input class="remarkInput" type="number" placeholder="请输入修改的价格" v-model="ePrice" />
			</template>
		</poup>
		<poup ref="tsPoup" :isCntSlot="false"></poup>
	</view>
</template>

<script>
	import poup from "@/components/poup/poup.vue";
	import ttBar from "@/components/ttBar/ttBar.vue";
	import API from "@/common/api.js";
	import COMM from "@/common/common.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar,poup
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				selectShop:state=>state.shop.selectShop
			})
			
		},
		data() {
			return {
				remarkText:'',
				statusArr:['全部','待支付预约金','待支付尾款','待支付全款','待开课','已开课','退款中','','已关闭','已完成'],
				txtArr:['已支付','待支付预约金','待支付尾款','待支付全款','已支付','已支付','已支付','已支付','待支付','已支付'],
				ePrice:'',
				orderDt:{
					member:{
						name:''
					}
				},
				typeArr:['','牛牛券','优惠券']
			};
		},
		methods:{
			
			addRemark(){
				let _this=this;
				_this.remarkText=_this.orderDt.memo;
				_this.$refs.remarkPoup.init({
					title:'订单备注',
					cntText:'为订单'+_this.orderDt.orderNo+'添加备注',
					confirmFcn:()=>{
						if(!_this.remarkText){
							uni.showToast({
								title: '请输入备注信息',
								icon: 'none'
							});
							return false;
						}else{
							//添加备注接口
							API.remarkOrder({
								order_id:_this.orderDt.order_id,
								memo:_this.remarkText
							}).then(res=>{
								_this.$refs.remarkPoup.close()
								_this.orderDt.memo=_this.remarkText
								uni.showToast({
									title: '添加备注成功',
									icon: 'none'
								});
							})
						}
					}
					
				})
				_this.$refs.remarkPoup.show()
			},
			// 修改价格
			editPrice(){
				let _this=this;
				_this.$refs.pricePoup.init({
					title: '修改价格',
					cntText: '修改订单【' +_this.orderDt.orderNo + '】的价格',
					confirmFcn: () => {
						let _oldPrice=_this.orderDt.coursePrice;
						let _price=_this.ePrice.toString().tailCut();
						let reg=/((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
						if (!_price) {
							uni.showToast({
								title: '请输入修改的新价格',
								icon: 'none'
							});
							return false;
						} else if(!reg.test(_price)){
							uni.showToast({
								title: '请输入合法的金额',
								icon: 'none'
							});
							return false;
						}else if(parseFloat(_price)>_oldPrice){
							uni.showToast({
								title: '对不起，你设置的价格过高',
								icon: 'none'
							});
							return false;
						}else if(parseFloat(_price)<(_oldPrice*0.8).toFixed(2)){
							uni.showToast({
								title: '对不起，你设置的价格过低',
								icon: 'none'
							});
							return false;
						}else {
							_this.ePrice='';
							// //添加备注接口
							API.editOrderPrice({
								orderNo: _this.orderDt.orderNo,
								price: parseFloat(_price)
							}).then(res => {
								if(res.data.result==1){
									_this.$refs.pricePoup.close()
									this.getData();
									uni.showToast({
										title: '修改价格成功',
										icon: 'none'
									});
								}else{
									uni.showToast({
										title:'修改失败,'+res.data.msg,
										icon: 'none'
									});
								}
								
							})
						}
					}
							
				})
				_this.$refs.pricePoup.show()
			},
			showNiuQuan(){
				
				this.$refs.tsPoup.init({
					title:'关于牛牛券',
					cntText:'牛牛券是找培训平台对用户的一种购课补贴，关于牛牛券与商家的结算明细，请前往电脑端商家管理后台--账单明细查看。',
					cancle:''
					
				})
				this.$refs.tsPoup.show()
			},
			getData(){
				API.getOrderDetailById(this.orderId).then(res=>{
					this.orderDt=res.data.data
				})
			},
			// 获取倒计时
			getDjs(time){
				if(time){
					let leftTime=parseInt(time)*1000
					let  hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
					let  minutes = parseInt(leftTime / 1000 / 60 % 60, 10); //计算剩余的分钟
					hours = checkTime(hours);
					minutes = checkTime(minutes);
					return hours+'小时'+minutes+'分钟后自动关闭'
				}
				function checkTime(i) { //将0-9的数字前面加上0，例1变为01
					if(i < 10) {
						i = "0" + i;
					}
					return i;
				}
			},
			// 跳转到会话
			toMsg(e){
				if(this.userInfo.admin==1 || this.userInfo.roles.join(',').indexOf('3')>-1){
					let toImid = this.orderDt.imid;
					this.toPage({
						url: 'conversationDt',
						cvid: 'C2C' + toImid,
						toImId: toImid
					})
				}else{
					uni.showToast({
						title: '暂无相关权限',
						icon: 'none'
					});
				}
				
				
			},
			call(e){
				COMM.callPhone(e.currentTarget.dataset.tel)
			},
			// 催单
			reminder(e){
				if(this.userInfo.admin==1 || this.userInfo.roles.join(',').indexOf('3')>-1){
					let _this=this;
					let toImid=e.currentTarget.dataset.imid
					this.$store.dispatch("timSendZdMsg",{
						to:toImid,
						payload:{
							data: 'reminder',
							description: this.orderDt.orderNo
						}
					}).then(res=>{
						this.toPage({
							url: 'conversationDt',
							cvid: 'C2C' + toImid,
							toImId: toImid
						})
					})
				}else{
					uni.showToast({
						title: '暂无相关权限',
						icon: 'none'
					});
				}
				
			},
			
			
		},
		onLoad(cfm) {
			this.orderId=cfm.orderId;
			this.getData()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}

	.orderStatusBox {
		display: flex;
		align-items: center;
		background-color: #ffb423;
		padding: 20upx 30upx;

		.iconfont {
			font-size: 76upx;
			margin-right: 30upx;
			color: #07080d;
		}

		.orderTextBox {
			display: flex;
			flex-direction: column;
		}

		text {
			font-size: 28rpx;
			color: #07080d;
		}

		.statusText {
			font-size: 32rpx;
			font-weight: bold;
			color: #07080d;
			margin-bottom: 10upx;
			margin-right: 10upx;
		}
	}

	.remarkBox {
		margin: 20upx 17upx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10upx;
		padding: 50upx 32upx;
		display: flex;
		align-items: center;

		.remarkTitle {
			font-size: 28rpx;
			color: #202932;
		}

		text {
			font-size: 28rpx;
			color: #939393;
		}

		.remarkCnt {
			flex-grow: 1;
		}
	}

	.buyerBox {
		margin: 20upx 17upx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10upx;
		padding: 20upx 50upx 40upx 32upx;
		display: flex;
		flex-direction: column;

		.buyerTitle {
			font-size: 36rpx;
			font-weight: bold;
			color: #202932;
			margin-bottom: 30upx;
		}

		.buyerInfo {
			display: flex;
			align-items: center;

			.buyerName {
				font-size: 32rpx;
				color: #202932;
				margin-right: 42upx;
			}

			.buyerTel {
				font-size: 32rpx;
				color: #202932;
				flex: 1;
			}

			.iconfont {
				color: #ffb423;
				font-size: 48upx;
				margin-left: 50upx;
			}

		}

	}

	.orderInfoBox {
		margin: 20upx 17upx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10upx;
		padding: 20upx 0 40upx 0;
		display: flex;
		flex-direction: column;
		margin-bottom: 140upx;
		.orderTitle {
			font-size: 36rpx;
			font-weight: bold;
			color: #202932;
			padding-left: 32upx;
		}

		.goodBox {
			display: flex;
			border-bottom: 1px solid #efefef;
			padding: 15upx 32upx;

			image {
				width: 166upx;
				height: 166upx;
				flex-shrink: 0;
				border-radius: 10upx;
				margin-right: 30upx;
			}

			.goodInfo {
				display: flex;
				flex-direction: column;
				padding: 12upx 0;

				.goodTitle {
					font-size: 28rpx;
					color: #202932;
					margin-bottom: 8upx;
				}

				.goodPrice {
					font-size: 32rpx;
					font-weight: bold;
					color: #202932;
				}
			}

		}

		.studentBox {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #efefef;
			padding: 15upx 32upx;

			.studentTt {
				font-size: 28rpx;
				color: #202932;
			}

			.iconfont {
				font-size: 40upx;
				color: #babfc3;
				margin-right: 15upx;
			}

			.studentName {
				font-size: 28rpx;
				color: #202932;
				margin-right: 50upx;
			}

			image {
				width: 40upx;
				height: 40upx;
				margin-right: 15upx;
			}

			.studentTel {
				font-size: 28rpx;
				color: #202932;
			}

			.paymentCount {
				font-size: 36rpx;
				font-weight: bold;
				color: #202932;
			}
		}

		.orderInfo {
			display: flex;
			align-items: center;
			padding: 20upx 32upx 0 32upx;
			font-size: 26rpx;
			color: #737373;
			.iconfont{
				font-size: 28upx;
				margin-left: 10upx;
			}
		}

	}

	.orderDtBtnGroup {
		position: fixed;
		width: 100%;
		height: 132upx;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		z-index: 99;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding: 0 20upx;
		button {
			margin: 0;
			width: 206rpx;
			height: 64rpx;
			border-radius: 32upx;
			background-color: rgba(0,0,0,0);
			font-size: 34upx;
			line-height: 58upx;
			color: #767676;
			border: 3upx solid #767676;
			margin-left: 24upx;
		}
		button:after{
			border: none;
		}
		.active{
			border: 3upx solid #ffa71d;
			color: #ffa71d;
		}
	}
	.remarkInput{
		border: 1px solid #cacaca;
		font-size: 24upx;
		margin-top: 20upx;
		height: 60upx;
		padding: 0 15upx;
	}
</style>
